$(document).ready(function (){
	$('.componentPalette').draggable({ 
		revert: 'valid', 
		opacity: 0.45,
		helper: 'clone',
		cursorAt: { cursor: "move", top: $('.componentPalette').height()/2, left: $('.componentPalette').width()/2 }
	 });
	 
	$('.droppable' ).droppable({
			accept:'.componentPalette',
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function( event, ui ) {
				
				$( this )
					.addClass( "ui-state-highlight" );
				
				$( ui.draggable ).clone().attr('style','').removeClass('componentPalette').addClass('component').appendTo(this)
				.draggable({
					containment:'parent',
					axis: 'x'
				}).resizable({
					containment: 'parent'			
				}).mousedown(function() {
				});				
			}
	});	
});